import 'package:first_flutter_app/constant/dataInfo.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:get/get.dart';
import '../../controller/loginPageControler.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        // width: ,
        child: Row(
          // shrinkWrap: true,
          children: [
            Container(
              child: Stack(
                children: [
                  Container(
                    child: Image.asset(
                      "images/5.png",
                      fit: BoxFit.cover,
                      width: ScreenUtil().setWidth(1000),
                      height: ScreenUtil().setWidth(1950),
                    ),
                  ),
                  Positioned(
                    bottom: ScreenUtil().setSp(80),
                    // top: ScreenUtil().setSp(10),
                    left: ScreenUtil().setSp(80),
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.blue[600],
                        borderRadius: BorderRadius.all(
                          Radius.circular(5.0),
                        ),
                      ),
                      padding: EdgeInsets.all(ScreenUtil().setSp(20)),
                      child: Text(
                        "商户编号:  7237723478237",
                        style: TextStyle(
                          fontSize: ScreenUtil().setSp(80),
                          color: Colors.white,
                          decoration: TextDecoration.none,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            loginForm(),
          ],
        ),
      ),
    );
  }

  Widget loginForm() {
    return Container(
      margin: EdgeInsets.only(
        // left: ScreenUtil().setSp(200),
        top: ScreenUtil().setSp(30),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            child: ElevatedButton(
              onPressed: () {},
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith((states) {
                  //设置按下时的背景颜色
                  if (states.contains(MaterialState.pressed)) {
                    return Colors.blue[800];
                  }
                  //默认不使用背景颜色
                  return Colors.blue[600];
                }),
              ),
              child: Container(
                padding: EdgeInsets.all(ScreenUtil().setSp(20)),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(4.0)),
                ),
                alignment: Alignment.center,
                child: Text(
                  "账号登录",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: ScreenUtil().setSp(70),
                  ),
                ),
              ),
            ),
          ),
          mySwiper(),
          inputPasswd(),
          keyBoard(),
          noPasswdLogin(),
        ],
      ),
    );
  }

  // 滚动账号
  Widget mySwiper() {
    return Container(
      alignment: Alignment.centerRight,
      height: ScreenUtil().setHeight(500),
      width: ScreenUtil().setWidth(400),
      child: Swiper(
        scrollDirection: Axis.horizontal,
        itemCount: loginInfo.length,
        control: SwiperControl(
          color: Colors.black26,
          size: 50,
        ), // 页面控制器 左右翻页按钮
        scale: 0.95, // 两张图片之间的间隔
        itemBuilder: (BuildContext context, int index) {
          return Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.blue,
                    /*
                    color: Color.fromRGBO(
                      Random().nextInt(256),
                      Random().nextInt(256),
                      Random().nextInt(256),
                      1,
                    ),
                    */
                  ),
                  child: Icon(
                    Icons.account_circle,
                    size: 80,
                    color: Colors.white,
                  ),
                ),
                Container(
                  child: Text(
                    loginInfo[index]['loginName'],
                    style: TextStyle(
                      fontSize: ScreenUtil().setSp(80),
                      color: Colors.black,
                      decoration: TextDecoration.none,
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  // 密码提示
  Widget inputPasswd() {
    return Container(
      margin: EdgeInsets.only(top: ScreenUtil().setSp(30)),
      child: Column(
        children: [
          Container(
            alignment: Alignment.center,
            child: Text(
              "请输入密码",
              style: TextStyle(
                decoration: TextDecoration.none,
                fontSize: 25,
                color: Colors.black,
              ),
            ),
          ),
          GetBuilder(
            init: LoginPageController(),
            builder: (_) => Container(
              width: ScreenUtil().setWidth(220),
              height: ScreenUtil().setWidth(50),
              child: inputPasswdCircle(),
            ),
          ),
        ],
      ),
    );
  }

  // 密码圈
  Widget inputPasswdCircle() {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemBuilder: (context, index) {
        return Container(
          margin: EdgeInsets.only(
            left: ScreenUtil().setSp(40),
            // right: ScreenUtil().setSp(30),
          ),
          child: CircleAvatar(
            radius: 5,
            backgroundColor: Colors.black26,
            child: CircleAvatar(
              backgroundColor: LoginPageController.lc.passwdList[index][index]
                  ? Colors.black12
                  : Colors.white,
              radius: 4,
            ),
          ),
        );
      },
      itemCount: LoginPageController.lc.passwdList.length,
    );
  }

  // 数字键盘
  Widget keyBoard() {
    return Expanded(
      child: Container(
        width: ScreenUtil().setWidth(480),
        // height: ScreenUtil().setHeight(300),
        margin: EdgeInsets.only(
          left: ScreenUtil().setSp(80),
          top: ScreenUtil().setSp(50),
        ),
        child: Wrap(
          // spacing: ScreenUtil().setSp(5),
          runSpacing: ScreenUtil().setSp(20),
          children: [
            numClick("1"),
            numClick("2"),
            numClick("3"),
            numClick("4"),
            numClick("5"),
            numClick("6"),
            numClick("7"),
            numClick("8"),
            numClick("9"),
            iconCleanClick(Icon(
              Icons.refresh,
              size: ScreenUtil().setSp(80),
            )),
            numClick("0"),
            iconBackClick(Icon(
              Icons.keyboard_return,
              size: ScreenUtil().setSp(80),
            )),
          ],
        ),
      ),
    );
  }

  // 数字按钮
  Widget numClick(String num) {
    String passwd = "";
    return GetBuilder(
      init: LoginPageController(),
      builder: (_) => InkWell(
        focusColor: Colors.black54,
        hoverColor: Colors.black54,
        splashColor: Colors.blue,
        onTap: () {
          LoginPageController.lc.updatePasswd(num);
          passwd = LoginPageController.lc.loginPasswd;
          if(passwd == "123456") {
            Get.toNamed("/tableHomePage");
          }
        },
        child: Container(
          padding: EdgeInsets.only(top: 35.sp),
          width: 150.w,
          height: 150.h,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: Colors.black12, width: 1),
          ),
          child: Text(
            num,
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 60.sp,
              color: Colors.black,
            ),
          ),
        ),
      ),
    );
  }

  // 清除图标键盘按钮
  Widget iconCleanClick(Icon icon) {
    return GetBuilder(
      init: LoginPageController(),
      builder: (_) => InkWell(
        onTap: () {
          LoginPageController.lc.cleanPasswd();
        },
        child: Container(
          width: ScreenUtil().setWidth(150),
          height: ScreenUtil().setHeight(150),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: Colors.black12, width: 1),
          ),
          child: icon,
        ),
      ),
    );
  }

  // 返回图标键盘按钮
  Widget iconBackClick(Icon icon) {
    return GetBuilder(
      init: LoginPageController(),
      builder: (_) => InkWell(
        onTap: () {
          LoginPageController.lc.backPasswd();
        },
        child: Container(
          width: ScreenUtil().setWidth(150),
          height: ScreenUtil().setHeight(150),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: Colors.black12, width: 1),
          ),
          child: icon,
        ),
      ),
    );
  }

  Widget noPasswdLogin() {
    return Container(
      margin: EdgeInsets.only(
          bottom: 50.sp, left: 150.sp),
      child: InkWell(
        onTap: () {
          if(LoginPageController.lc.loginPasswd == "123456") {
            Get.toNamed("/tableHomePage");
          }
        },
        child: Row(
          children: [
            Text(
              "直 接 进 入",
              style: TextStyle(
                color: Colors.black54,
                fontSize: ScreenUtil().setSp(80),
              ),
            ),
            // CircleAvatar(
            //   backgroundColor: Colors.white,
            //   radius: 5,
            //   child: Icon(
            //     Icons.navigate_next,
            //     size: 30,
            //     color: Colors.black54,
            //   ),
            // ),
            CircleAvatar(
              radius: ScreenUtil().setSp(50),
              backgroundColor: Colors.black26,
              child: CircleAvatar(
                backgroundColor: Colors.white,
                radius: ScreenUtil().setSp(45),
                child: Icon(
                  Icons.navigate_next,
                  size: 20,
                  color: Colors.black54,
                ),
              ),
            ),

            // Container(
            //   margin: EdgeInsets.only(
            //     left: ScreenUtil().setSp(250),
            //   ),
            //   child: Text(
            //     "直 接 进 入",
            //     style: TextStyle(
            //       color: Colors.black54,
            //       fontSize: ScreenUtil().setSp(80),
            //     ),
            //   ),
            // ),
            // Container(
            //   margin: EdgeInsets.only(
            //     left: ScreenUtil().setSp(0),
            //   ),
            //   width: ScreenUtil().setWidth(150),
            //   height: ScreenUtil().setHeight(150),
            //   child: Icon(
            //     Icons.navigate_next,
            //     size: 30,
            //     color: Colors.black54,
            //   ),
            //   decoration: BoxDecoration(
            //     shape: BoxShape.circle,
            //     border: Border.all(color: Colors.black12, width: 1),
            //   ),
            // )
          ],
        ),
      ),
    );
  }
}
